<template>
  <div class="top">
      <span class="header-left">
        <span>Explore</span>
        <span>Start a project</span>
      </span>
    <span class="header-center">KICKSTARTER</span>
    <span class="header-right">
        <span>Search</span>
        <span></span>
      </span>
  </div>
</template>

<script>
    export default {
        name: "project-header-top"
    }
</script>

<style scoped lang="scss">
  .lineBlock{display: inline-block}
  .top{
    line-height: 80px;
    span{display: inline-block}
    .header-left{
      width: 25%;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #2E2E2E;
      letter-spacing: 0.2px;
      span:nth-child(1){
        padding: 0 12px 0 43px;
      }
    }
    .header-center{
      width: 50%;
      text-align: center;
      font-family: Phosphate-Solid;
      font-size: 24px;
      color: #1C4650;
      letter-spacing: 0.5px;
    }
    .header-right{
      width: 25%;
      text-align: right;
      padding-right:29px;
      box-sizing: border-box;
      span{vertical-align: middle}
      span:nth-child(2){
        width: 43px;
        height: 43px;
        background: #D8D8D8;
        margin-left:53px;
        border-radius: 50%;
      }
    }
  }
</style>
